<style lang='scss' type='stylesheet/scss' scoped>
</style>
<template>
  <div>
    <as-card :text="text"
             title="slot 可以插入头、尾，分别对应 header footer">
      <as-button @click="dialogVisible = true">打开对话框</as-button>
      <as-dialog :visible.sync="dialogVisible"
                 :closeOnClickModal="true">
        <div slot="header">
          <i class="el-icon-price-tag"
             style="margin-right:5px"></i>插槽标题
        </div>
        你好！
        <as-button @click="dialogVisible=false"
                   slot="footer"
                   style="float:right"
                   type="primary">确定</as-button>
      </as-dialog>
    </as-card>
  </div>
</template>

<script type="text/ecmascript-6">
import { mapGetters } from "vuex";
export default {
  name: "",
  computed: {
    ...mapGetters(["isMobile"])
  },
  data() {
    return {
      name: "",
      dialogVisible: false,
      text: `<template>
   <div>
     <as-button @click="dialogVisible = true">打开对话框</as-button>
     <as-dialog :visible.sync="dialogVisible"
                :closeOnClickModal="true">
       <div slot="header">
         <i class="el-icon-price-tag" style="margin-right:5px"></i>插槽标题
       </div>
       你好！
       <as-button @click="dialogVisible=false"
                  slot="footer"
                  style="float:right"
                  type="primary">确定</as-button>
     </as-dialog>
   </div>
 </template>
 <script>
 export default {
   data() {
     return {
       dialogVisible: false
     }
   }
 }
 <\/script>`
    };
  }
};
</script>
